import { Component, ReactNode } from "react";
// 所谓的组合就是vue里面的插槽
// 更灵活的扩展组件的结构

type Iprops={
    children:ReactNode;
    header:ReactNode;
    main:ReactNode
}

class Composition extends Component<Iprops,any>{
    render(): ReactNode {
        return(
            <fieldset>
                <legend>Composition</legend>
                {/* {this.props.children} */}
                <div className="header">
                    {this.props.header}
                </div>
                <div className="main">
                    {this.props.main}
                </div>
            </fieldset>
        )
    }
}

export default Composition